.area {
    border: 1px solid #ccc;
    border-width: 0 1px;
    background-image: url(../images/cloud-main-bg.png);
    display: flex;
    justify-content: space-between;
}

/* 右侧区域 */
.area-right {
    width: 250px;
}

.area-right .area-login {
    height: 126px;
    background-image: url('../images/sprite_03.png');
    width: 250px;
}

.area-right .area-login p {
    margin: 0 22.5px;
    padding: 16px 0;
    line-height: 22px;
}

.area-right .area-login a {
    display: block;
    width: 100px;
    height: 31px;
    background-image: url('../images/sprite_03.png');
    background-position: 0 -195px;
    margin: 0 75px;
    text-align: center;
    color: aliceblue;
    line-height: 31px;
}

.area-right .area-login a:hover {
    background-position: -110px -195px;

}

.settle-singer {
    padding: 20px;
}

.settle-singer ul {
    margin-top: 6px;
    padding-top: 15px;
}

.settle-singer ul li {
    width: 210px;
    height: 62px;
    background-color: bisque;
    display: flex;
    margin-bottom: 15px;
    cursor: pointer;
}

.settle-singer ul li:hover .singer-info {
    background-color: rgb(244, 244, 244);
}

.settle-singer ul li img {
    width: 62px;
    height: 62px;
}

.singer-info {
    border: 1px solid #ccc;
    border-left: 0;
    width: 133px;
    padding-left: 14px;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(250, 250, 250);
}

.singer-info h4 {
    font-size: 14px;
}

.singer-info p {
    margin-top: 8px;
    margin-right: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.hot-up {
    padding: 20px;
}

.hot-up ul {
    margin-top: 6px;
    padding-top: 15px;
    box-sizing: border-box;
}

.hot-up ul li {
    box-sizing: border-box;
    width: 210px;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.hot-up ul li div {
    height: 40px;
    box-sizing: border-box;
    padding: 4px 0;
    margin-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}

.hot-up ul li img {
    width: 40px;
    height: 40px;
}

.hot-up ul li div p {
    color: #000;
    height: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.hot-up ul li p a {
    color: #666;
}

/* 左侧区域 */
.area-left {
    box-sizing: border-box;
    width: 729px;
    padding: 20px 20px 40px;
}

.area-left .hot-tuijian {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #C10D0C;
}

.area-left .hot-tuijian .tuijian {
    display: flex;
    height: 35px;
    color: #333333;
    padding: 0px 10px 0px 34px;

    background-image: url(../images/sprite_03.png);
    background-position: -225px -156px;
    background-repeat: no-repeat;
}

.area-left .hot-tuijian .more {
    display: flex;
    align-items: center;
}

.area-left .hot-tuijian .more i {
    content: "";
    background-image: url(../images/sprite_03.png);
    background-position: 0 -240px;
    width: 12px;
    height: 12px;
    display: block;
    margin-left: 5px;
}

.area-left .hot-tuijian .more a:hover {
    text-decoration: underline;
}

.area-left .hot-tuijian .tuijian .title {
    font-size: 20px;
    line-height: 28px;
}

.tuijian ul {
    margin: 7px 0px 0px 20px;
    display: flex;
    color: #666;
}

.tuijian ul li a {
    font-size: 12px;
}

.tuijian ul li a:hover {
    text-decoration: underline;
}

.tuijian ul li span {
    margin: 0 10px;
}

.hot-module .hot-main {
    display: flex;
    flex-wrap: wrap;
}

.hot-module .hot-main li {
    position: relative;
    margin: 20px 42px 0 0;
    width: 140px;
}

.hot-module .hot-main li:nth-child(4n) {
    margin-right: 0px;
}

.hot-module .hot-main li img {
    display: block;
    width: 140px;
    height: 140px;
}

.hot-module .hot-main li .imgCover {
    width: 140px;
    height: 140px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background: url('../images/sprite_05_coverall.png') no-repeat 0 -20px;
}

.hot-module .hot-main li .text {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    padding-bottom: 20px;

}

.hot-module .hot-main li .text i {
    display: inline-block;
    background: url('../images/sprite_07_icon.png') no-repeat -31px -658px;
    width: 35px;
    height: 15px;
    vertical-align: middle;
    margin: -2.5px 3px 0 0;
}

.hot-module .hot-main li .text:hover {
    text-decoration: underline;
}

.img-main {
    position: relative;
}

.img-cover-text {
    display: flex;
    align-items: center;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background: url('../images/sprite_05_coverall.png') no-repeat 0 -537px;
    width: 140px;
    height: 27px;
}

.img-cover-text .icon-headset {
    display: block;
    width: 14px;
    height: 11px;
    margin: 9px 5px 9px 10px;
    background: url('../images/sprit_06_iconall.png') no-repeat 0 -24px;
}

.icon-count {
    display: block;
    line-height: 27px;
    color: #cccccc;
}

.play {
    position: absolute;
    right: 5.5px;
    top: 5.5px;
    display: block;
    width: 16px;
    height: 17px;
    background: url('../images/sprit_06_iconall.png') no-repeat 0 0px
}

.play:hover {
    background-position: 0 -60px;
}

.new-song-list {
    border: 1px solid #ccc;
    height: 188px;
    background-color: #f5f5f5;
    margin: 20px 0 37px;
    box-sizing: border-box;
}

.new-song-list .inner {
    border: 1px solid rgb(247, 245, 245);
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
}

.control {
    position: absolute;
    display: block;
    width: 17px;
    height: 17px;
    background-image: url(../images/sprite_03.png);
    margin-top: -8.5px;
    top: 50%;
}

.control-right {
    right: 3px;
    background-position: -305px -77px;
}

.control-left {
    left: 3px;
    background-position: -265px -77px;
}

.new-song-list .inner .roller {
    height: 100%;
    display: flex;
    overflow: hidden;
}

.new-song-list .inner .roller .songp-list {
    margin-top: 24px;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-song-list .inner .roller .songp-list li {
    width: 118px;
    height: 150px;
    background-image: url(../images/sprite_03.png);
    background-position: -260px 100px;
    background-repeat: no-repeat;
}

.new-song-list .inner .roller .songp-list li .album {
    position: relative;
    padding-bottom: 4px;
}

.new-song-list .inner .roller .songp-list li .album .cover {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/sprite_05_coverall.png);
    background-position: 0 -570px;
    width: 118px;
    height: 100px;
}

.new-song-list .inner .roller .songp-list li .album .icon-paly {
    display: none;
    background-image: url(../images/sprit_06_iconall.png);
    background-position: 0 -85px;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 72px;
    bottom: 10px;
}

.new-song-list .inner .roller .songp-list li .album:hover .icon-paly {
    display: inline-block;
}

.song-name:hover,
.singer-name:hover {
    text-decoration: underline;
}

.singer-name {
    color: #666666;
}

.new-song-list .inner .roller .songp-list li p {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.song-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.billboard-module .top-main {
    display: flex;
    margin-top: 20px;
    height: 472px;
    width: 689px;
    background-image: url(../images/index_bill.png);
    background-size: cover;
    overflow: hidden;
}

.top-item {
    width: 230px;
}

.top-header {
    box-sizing: border-box;
    padding: 20px 0 0 19px;
    height: 120px;
    display: flex;
}

.top-header .header-img {
    width: 80px;
    height: 80px;
    position: relative;
}

.top-header .header-img img {
    width: 100%;
    height: 100%;
    display: block;
}

.top-header .header-img a {
    background-image: url(../images/sprite_05_coverall.png);
    background-position: -145px -57px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
}

.top-header .header-tit {
    width: 116px;
    height: 50.5px;
    margin: 6px 0 0 10px;
}

.top-header .header-tit .top-btn {
    margin: 10px 10px 0 0;
    display: inline-block;
    background-image: url(../images/sprite_03.png);
    width: 22px;
    height: 22px;
}

.top-header .header-tit h3 {
    font-size: 14px;
}

.top-header .header-tit .top-play {
    background-position: -267px -205px;
}

.top-header .header-tit .top-add {
    background-position: -300px -205px;
}

.top-item dd ol {
    margin-left: 12px;
}

.top-item dd ol .no {
    width: 35px;
    height: 32px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    line-height: 32px;
}
.top-item dd ol li{
    display: flex;
}
.top-item dd ol .song {
    height: 32px;
    display: inline-block;
    line-height: 32px;
    vertical-align: bottom;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    flex: 1;
}
.top-item dd ol .song:hover{
    text-decoration: underline;
}
.top-item dd ol li:nth-child(-n+3) span {
    color: #C10D0C;
}
.top-item dd ol li{
    overflow: hidden;
}
.top-item dd ol li .more{
    width: 198px;
    height: 32px;
    margin: 0 32px 0 0;
    text-align: right;
}
.top-item dd ol li .more a{
    line-height: 32px;
}
.top-item dd ol li .more a:hover{
    text-decoration: underline;
}
.top-item dd ol li:hover .song-btns{
    display: flex;
}
.song-btns{
    display: none;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}
.song-btns a{
    margin-right: 5px;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(../images/sprite_07_icon.png);
}

.song-btns a:nth-child(1){
    background-position: -45px -635px;
}
.song-btns a:nth-child(2){
    background-position: 2px -698px;
}
.song-btns a:nth-child(3){
    background-position: -44px -85.5px;
}